import React, { PropTypes, Component } from 'react'

import { SketchPicker } from 'react-color';
import Drawer from 'material-ui/Drawer'
import AppBar from 'material-ui/AppBar'
import IconButton from 'material-ui/IconButton'
import RaisedButton from 'material-ui/RaisedButton'
import TextField from 'material-ui/TextField'
import {List, ListItem} from 'material-ui/List'
import Subheader from 'material-ui/Subheader';
import Toggle from 'material-ui/Toggle';

import Checkbox from 'material-ui/Checkbox';
 const styles={
    backgroudColor:{
      marginLeft:10,
      paddingLeft:0,
      paddingRight:140
    }
 }

class CptDrawer extends Component {
 constructor(props, context) {
    super(props, context)
    this.state={
      dialogBackgroundImageOpen:false,
      listCptOpen:true,
      drawerCptsOpen:false,
      colorPickerBtnOpen:false,
      colorPickerOpen:false,
      hasBackgroundImage:false,
      positionId:this.props.component.positionId

    }
 }

  /**
   * 处理显示侧边栏  
   * @return {dialogBackgroundImageOpen} 继承自父组件 props
   */
   handleDrawerToggle(){
    this.props.handleDrawerToggle()
   }



/**
 * 设置组件高度
 * @aibokalv@163.com
 * @DateTime         2016-08-03T15:12:39+0800
 * @param            {[type]}                 e [description]
 * @return           {[type]}                   [description]
 */
  handleHeightSubmit(e) {
     // console.log(e.target,'---------',e.which)
    const text = e.target.value.trim() 

    if (e.which === 13&&parseInt(text)==text) {

      let styles=this.props.component.styles
      let newstyles= Object.assign({}, styles, { height: `${text}px` }) 
      this.props.componentSetStyle(this.state.positionId,newstyles)
    }else{
     /**
      * todo    如果输入高度有错误 则利用sancbar进行提示
      */
    }
  } 

 
  /**
   * 处理颜色选择器选择结束后
   * @aibokalv@163.com
   * @DateTime         2016-08-03T15:13:22+0800
   * @param            {[type]}                 color react-color的回调
   * @return           {[type]}                       [description]
   */
  handleChangeComplete(color){
    let styles=this.props.component.styles
    const rgba=color?`rgba(${color.rgb.r},${color.rgb.g},${color.rgb.b},${color.rgb.a})`:'transparent'
    let newstyles= Object.assign({}, styles, { backgroundColor: rgba }) 
    this.props.componentSetStyle(this.state.positionId,newstyles)

  }

  /**
   * [handleBackImage description]
   * @aibokalv@163.com
   * @DateTime         2016-08-12T10:39:53+0800
   * @param            {[type]}                 src [description]
   * @return           {[type]}                     [description]
   */
  
   handleDisableBackImage(){
    let newStyles= Object.assign({}, this.props.componentStyles, { backgroundImage:'none' }) 
    this.props.componentSetStyle(this.state.positionId,newStyles)
 }
  /**
   * 设置背景颜色开关
   * @aibokalv@163.com
   * @DateTime         2016-08-03T15:14:04+0800
   * @param            {[type]}                 e [description]
   * @return           {[type]}                   [description]
   */
  handleColorPickerBtnToggle(){ 
      this.setState({
        colorPickerBtnOpen:!this.state.colorPickerBtnOpen
      })
      if(this.state.colorPickerBtnOpen){
        this.handleChangeComplete()
        this.setState({colorPickerOpen:false})
      }
  }
  /**
   * 选择选择器按钮点选切换  
   * @aibokalv@163.com
   * @DateTime         2016-08-03T15:14:39+0800
   * @param            {[type]}                 e [description]
   * @return           {[type]}                   [description]
   */
  handleColorPickerToggle(){
      this.setState({
        colorPickerOpen:!this.state.colorPickerOpen
      })
  }
  /**
   * 设置背景图开关
   * @aibokalv@163.com
   * @DateTime         2016-08-03T15:15:12+0800
   * @param            {[type]}                 positionId [description]
   * @return           {[type]}                        [description]
   */
  handleDialogImgToggle(positionId){
    this.setState({hasBackgroundImage:!this.state.hasBackgroundImage})
    if(!this.state.hasBackgroundImage){
      this.props.handleDialogImgToggle(positionId)
    }else{
      this.handleDisableBackImage()
    }
  }
  /**
   * 显示设置背景图界面框
   * @aibokalv@163.com
   * @DateTime         2016-08-03T15:16:40+0800
   * @param            {[type]}                 positionId [description]
   * @return           {[type]}                        [description]
   */
  handleDialogImgShow(positionId){
    this.props.handleDialogImgToggle(positionId) 
  }


  handleWidgetToggle(componentId,widgetId,isChecked){
    this.props.widgetToggleEnable(componentId,widgetId,isChecked)
  }
  render() {
    let { component,actions } =this.props
    let positionId=component.positionId
    let widgets=component.widgets
    return (
      <div >

       <Drawer
            openSecondary={true}
             key={component.positionId} 
             docked={false}
             open={this.props.drawerOpen}
             component={component}
             actions={actions}
             onRequestChange={this.handleDrawerToggle.bind(this)}
            >

          <AppBar title={component.cptName}
          iconElementLeft={<div></div>}
                  iconElementRight=
                  {
                    <IconButton iconClassName="fa fa-angle-right"
                                onClick={this.handleDrawerToggle.bind(this)}  />
                   }

          />


    

           <List  style={{overflow:'hidden'}}> 
             <Subheader>布局相关</Subheader>
             <ListItem    primaryText="组件高度"
                          key={component.positionId} 
                         
                          leftIcon={<IconButton iconClassName="fa fa-cog" style={{padding:0}} />} 
                          nestedItems={[<ListItem key='cpt-height'>
                                           <TextField  hintText={component.styles.elHeight}
                                                        onKeyDown={this.handleHeightSubmit.bind(this)} />
                                          </ListItem>]}
              /> 
          </List> 
          <List  style={{overflow:'hidden'}}> 
             <Subheader>组件背景</Subheader>
             <ListItem    primaryText="背景颜色"
                          key="cpt-bgcolor" 
                          leftIcon={<IconButton iconClassName="fa fa-cog" style={{padding:0}} />} 
                          rightToggle={<Toggle onClick={this.handleColorPickerBtnToggle.bind(this) }/>} 
              >

              </ListItem> 
              <ListItem >
              {this.state.colorPickerBtnOpen?
                <RaisedButton label="背景颜色" 
                            style={{marginBottom:10}}
                            backgroundColor={component.styles.backgroundColor}
                            labelStyle={Object.assign({},styles.backgroudColor, { backgroudColor: 'red' })} 
                            onClick={this.handleColorPickerToggle.bind(this)}
                            />
              :null} 
                 {this.state.colorPickerOpen?
                <SketchPicker 
                  color={component.backgroundColor}
                  onChangeComplete={ this.handleChangeComplete.bind(this) } />
                  :null}
              </ListItem>    
             <ListItem    primaryText="背景图案"
                          key="cpt-bgimage"
                          leftIcon={<IconButton iconClassName="fa fa-cog" style={{padding:0}} />} 
                          rightToggle={<Toggle onToggle={()=>this.handleDialogImgToggle(positionId)} />} 
              />
               <ListItem >
               {this.state.hasBackgroundImage?
                <RaisedButton label="更换背景图" 
                            onClick={()=>this.handleDialogImgShow(positionId) }
                            />
              :null} 
             </ListItem>  
          </List> 
          <List  style={{overflow:'hidden'}}> 
            <Subheader>可选挂件</Subheader>
            
            {widgets.map((widget)=>{
              return <ListItem key={widget.positionId}>
                    <Checkbox label= {widget.widgetName}
                              defaultChecked={widget.enable}
                              onCheck={(e,isChecked)=>{this.handleWidgetToggle(positionId,widget.positionId,isChecked)}}
                      />
                </ListItem>
            })}
              
            
          </List>  

         

           
 
       </Drawer>
       
      </div>
    
     
    )
  }
}

CptDrawer.propTypes = {
  handleDrawerToggle:PropTypes.func.isRequired,
  component:PropTypes.object.isRequired,
  componentSetStyle:PropTypes.func.isRequired

}

export default CptDrawer
